<template>
  <div class="header">
    <van-icon name="wap-nav" size="2em"></van-icon>
    <div class="tab_bar">
      <span
        class="tab_link"
        @click="pushToPage('my')"
        :class="[activeName === 'my' ? 'active' : '']"
        >我的</span
      >
      <span
        class="tab_link"
        @click="pushToPage('home')"
        :class="[activeName === 'home' ? 'active' : '']"
        >发现</span
      >
      <span
        class="tab_link"
        @click="pushToPage('云村')"
        :class="[activeName === '云村' ? 'active' : '']"
        >云村</span
      >
      <span
        class="tab_link"
        @click="pushToPage('视频')"
        :class="[activeName === '视频' ? 'active' : '']"
        >视频</span
      >
    </div>
    <van-icon name="search" size="2em" @click="goToSearch" />
  </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
export default {
  name: 'Header',
  setup() {
    const store = useStore()
    const router = useRouter()
    // 获取最新的头部tab名称
    const activeName = computed(() => {
      return store.state.activeName
    })
    // 点击头部tab跳转对应页面
    function pushToPage(value) {
      store.commit('changeActiveName', value)
      router.push('/' + value)
    }
    // 跳转到搜索页面
    function goToSearch() {
      router.push('/search')
    }
    return {
      activeName,
      pushToPage,
      goToSearch
    }
  }
}
</script>

<style lang="less" scoped>
.header {
  display: flex;
  align-items: center;
  height: 3em;
  .tab_bar {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    .tab_link {
      font-size: 1.3em;
      color: #333;
      margin: 0 0.2rem;
    }
    .active {
      font-weight: 900;
    }
  }
}
</style>
